<template>
  <header>我的订单</header>
  <div class="wrapper">
    <div class="item" v-for="(content, index) in data.list" :key="index">
      <p class="item__top">
        <span class="item__top__tittle">{{ content.shopName }}</span>
        <span class="item__top__right">{{
          content.isCanceled ? "已取消" : "已下单"
        }}</span>
      </p>
      <div class="item__bottom">
        <div class="item__bottom__left">
          <img
            v-for="(item, index) in content.products"
            :key="index"
            :src="item.product.imgUrl"
            alt=""
            class="img"
          />
        </div>
        <div class="item__bottom__right">
          <div class="price">¥{{ content.price }}</div>
          <div class="total">共{{ content.total }}件</div>
        </div>
      </div>
    </div>
  </div>
  <Docker :n="2" />
</template>

<script>
import { onMounted, reactive } from "vue";
import { get } from "../../utils/post";
import Docker from "../../components/Docker";

const useData = () => {
  // 设置响应式数据data接收返回的订单信息
  const data = reactive({ list: [] });
  const getData = async () => {
    const result = await get("/api/order");
    data.list = result.data;
    for (let i=0;i<data.list.length;i++) {
      data.list[i].total=0;
      data.list[i].price=0;
      const item = data.list[i]
      for (let j=0;j<item.products.length;j++) {
        data.list[i].total+=item.products[j].orderSales;
        data.list[i].price+=item.products[j].orderSales*item.products[j].product.price
      }
    }
    console.log(data);
  };
  // 返回getData方法和data
  return { getData, data };
};

export default {
  name: "Order",
  components: { Docker },
  setup() {
    const { getData, data } = useData();
    onMounted(() => {
      getData();
    });
    return {
      getData,
      data,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
p {
  padding: 0;
  margin: 0;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  font-size: 0.16rem;
  color: $content-fontcolor;
}
.wrapper {
  position: absolute;
  top: 0.44rem;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  background-color: $content-bgcolor;
  padding: 0.16rem 0.18rem;
  overflow-y: auto;
  .item {
    background-color: #fff;
    padding: 0.16rem;
    border-radius: 0.04rem;
    margin-bottom: 0.16rem;
    &__top {
      height: 0.22rem;
      line-height: 0.22rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.16rem;
      &__tittle {
        color: $content-fontcolor;
        font-size: 0.16rem;
      }
      &__right {
        font: size 0.14rem;
        color: #999;
      }
    }
    &__bottom {
      height: 0.4rem;
      display: flex;
      justify-content: space-between;
      &__right {
        width: 0.7rem;
        text-align: right;
        .price {
          height: 0.2rem;
          line-height: 0.2rem;
          font-size: 0.14rem;
          color: $content-highlightcolor;
          margin-bottom: 0.04rem;
        }
        .total {
          display: inline-block;
          height: 0.16rem;
          line-height: 0.16rem;
          font-size: 0.12rem;
          color: $content-fontcolor;
        }
      }
      &__left {
        flex: 1;
        .img {
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.12rem;
        }
      }
    }
  }
}
</style>